<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 个人信息 -->
      <el-card v-loading="loading">
        <el-row><el-button class="btn" size="medium" type="primary" @click="backEquip">返回</el-button></el-row>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="设备名称">
            <span>{{ form.name }}</span>
          </el-form-item>
          <el-form-item label="租借原因" prop="reason">
            <el-input v-model="form.reason" :disabled="isChecked" />
          </el-form-item>
          <el-form-item label="租借时长(天)" prop="timelimit" label-width="120px">
            <el-select v-model="form.timelimit" placeholder="请选择" :disabled="isChecked">
              <el-option
                v-for="item in 7"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="设备照片">
            <el-image :src="equipPhoto" fit="fill" :lazy="true" style="width:200px;" />
          </el-form-item>
          <el-form-item v-if="$route.query.isAudit === '2'" label="归还照片">
            <div class="photolist">
              <div v-for="(item, i) in photoList" :key="i" class="photobox">
                <el-image :src="`http://124.222.15.71:8191/api/hold/imgdownload?fileName=${item.photo}`" fit="fill" :lazy="true" class="avatar" />
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="form.progress" label="进度">
            <el-tag :type="getStatus(form.progress).type">{{ getStatus(form.progress).label }}</el-tag>
          </el-form-item>
          <el-form-item v-if="!isChecked">
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="backEquip">取消</el-button>
          </el-form-item>
          <el-form-item v-if="isAudit">
            <el-button type="primary" @click="auditPass(form, 1)">通过</el-button>
            <el-button @click="auditPass(form, -1)">退回</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
import { lendEquip, getEquipDetail, lendHistoryById, auditEquipLend } from '@/api/equip'
import { getObjImg } from '@/api/photo'

export default {
  data() {
    return {
      equipPhoto: '',
      photoList: [],
      loading: false,
      equipid: this.$route.query.equipid,
      id: this.$route.query.id,
      equipInfo: {},
      form: {
        equipid: '',
        reason: '',
        timelimit: '',
        student: this.$store.getters.studentname
      },
      rules: {
        reason: [
          { required: true, message: '租借原因不能为空', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
        ],
        timelimit: [
          { required: true, message: '租借时长不能为空', trigger: 'blur' }
        ]
      },
      items: [
        { type: '', label: '租借待审核', progress: 0 },
        { type: 'success', label: '借用中', progress: 1 },
        { type: 'warning', label: '归还待审核', progress: 2 },
        { type: 'info', label: '已结束', progress: 3 },
        { type: 'danger', label: '租借审核未通过', progress: -1 },
        { type: 'danger', label: '归还审核未通过', progress: -2 }
      ]
    }
  },
  computed: {
    isChecked() {
      return this.$route.query.isCheck === '1'
    },
    isAudit() {
      return this.$route.query.isAudit === '0' || this.$route.query.isAudit === '2'
    }
  },
  created() {
    if (this.equipid && !this.id) {
      this.getEquipDetail(this.equipid)
    }
    if (this.id) {
      this.lendHistoryById(this.id)
    }
  },
  methods: {
    onSubmit() {
      this.$refs.formRef.validate(isOk => {
        if (isOk) {
          this.$confirm('确定租借设备吗').then(() => {
            this.$refs.uploadRef.saveImgAll().then((res) => {
              this.form.timelimit = this.form.timelimit.toString()
              return lendEquip(this.form)
            }).then(() => {
              this.$message.success('租借申请提交成功，等待管理员审核。')
              this.$router.go(-1)
            })
          })
        }
      })
    },
    async getEquipDetail(id) {
      this.loading = true
      const equipInfo = await getEquipDetail(id)
      this.loading = false
      const form = this.form
      form.equipid = equipInfo.id.toString()
      form.photoid = equipInfo.photoid
      this.equipPhoto = `http://124.222.15.71:8191/api/hold/imgdownload?fileName=${form.photoid}`
      form.name = equipInfo.name
      this.form = form
    },
    async getObjImg(name) {
      this.photoList = await getObjImg(name)
    },
    async lendHistoryById(id) {
      this.loading = true
      const row = await lendHistoryById(id)
      if (this.$route.query.isAudit === '2') {
        this.getObjImg(row[0].name + 'return')
      }
      this.loading = false
      this.form = row[0]
      this.equipPhoto = `http://124.222.15.71:8191/api/hold/imgdownload?fileName=${this.form.photoid}`
    },
    backEquip() {
      this.$refs.formRef.resetFields()
      this.$router.go(-1)
    },
    auditPass(form, progress) {
      let msg = ''
      msg = progress === 1 ? '通过' : '退回'
      if (form.progress === 2) {
        progress = progress === 1 ? 3 : -2
      }
      this.$confirm('确定' + msg + '吗').then(() => {
        // 如果点击了确定就会进入then
        return auditEquipLend(form.lendid, form.id, progress)
      }).then(() => {
        this.$message.success('审核成功')
        this.$router.go(-1)
      })
    },
    getStatus(progress) {
      return this.items.find(val => val.progress === progress)
    }
  }
}
</script>
<style>
.btn {
  display: flow;
  float: right;
}
</style>
